<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>demo</title>
  <link href="../bower_components/bootstrap/dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
  <link href="../dist/angular-city-select.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body ng-app="myApp">
  <div ng-controller="myController" class="container">
    <form method="POST" class="form-horizontal" role="form">
      <div class="form-group">
        <legend>测试</legend>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">所在地</label>
        <div class="col-sm-4">
          <city-select
            ng-model="item.city"></city-select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">Result</label>
        <div class="col-sm-10">
          <p class="form-control-static">{{item}}</p>
        </div>
      </div>
    </form>

  </div>

  <script src="../bower_components/angular/angular.min.js" type="text/javascript"></script>
  <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
  <script src="../src/angular-city-select.js" type="text/javascript"></script>
  <script>

    var app = angular.module('myApp', [ 'ui.bootstrap', 'angular.city.select' ]);

    app.controller('myController', ['$scope', function($scope){
      
      $scope.item = {
        city: [ '福建', '泉州', '安溪' ]
        // city: '350524'
      };

      $scope.$on('onCitySelected', function(event, item) {
        console.log(item);
      });

    }]);

  </script>
</body>
</html>